<template>
	<view class="main">
		<view class="avatarUrl">
			<button class="avatar" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image :src="avatarUrl" class="url"></image>
			</button>
		</view>
		<view class="nick">
			<text class="text">昵称：</text>
			<input type="nickname" class="nickInput" :value="nickName" @blur="bindblur" placeholder="请选择输入昵称" @input="bindinput" />
		</view>
		<view class="authority">
			<view class="sq">· 申请获取以下权限</view>
			<view class="av">· 获得你的信息(昵称、头像等)</view>
		</view>
		<view class="btn">
			<button type="default" class="button" @click="save()">保存</button>
		</view>
	</view>
</template>

<script>
import * as loginUtils from '../../utils/loginUtils.js'
import {baseUrl} from '../../common/config.js'
export default {
	data() {
		return {
			avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
			nickName: '',
			reLaunchUrl:''
		}
	},
	onLoad(e){
		this.reLaunchUrl = e.url;
	},
	methods: {
		// 昵称输入框
		bindblur(e) {
			this.nickName = e.detail.value;
		},
		// 昵称输入框
		bindinput(e) {
			this.nickName = e.detail.value;
		},
		// 选择头像转 base 64格式
		onChooseavatar(e) {
			uni.getFileSystemManager().readFile({
				filePath: e.detail.avatarUrl,
				encoding: 'base64',
				success: r => {
					this.avatarUrl = `data:image/bmp;base64,${r.data}`
				}
			});
		},
		// 保存头像和昵称
		save() {
			if (this.avatarUrl == 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0') {
				uni.showToast({
					title:"请选择头像",
					icon:"error",
				})
				return false;
			}
			if (this.nickName.length < 2) {
				uni.showToast({
					title:"请输入昵称",
					icon:"error",
				})
				return false;
			}
			uni.setStorageSync('memberName', this.nickName)
			uni.setStorageSync('avatarUrl', this.avatarUrl)
			
			uni.reLaunch({
				url: this.reLaunchUrl ? this.reLaunchUrl : '/pages/mine/mine'
			});
			// 保存到线上
			// uni.showLoading({
			// 	title: '加载中'
			// });
			// uni.uploadFile({
			// 	url: 'http://api.lhdtest.com/auth/save',
			// 	filePath: this.avatarUrl,
			// 	name: 'file',
			// 	formData: {
			// 		nickname: this.nickName,
			// 	},
			// 	header: {},
			// 	success: res => {
			// 		// 注意：这里返回的res.data类型是string  需要自己去转换为JSON
			// 		let data = JSON.parse(res.data);
			// 		if (data.code == 0) {
			// 			//this.avatarUrl = data.data.url;
			// 			uni.showToast({
			// 				title:"保存成功！",
			// 			})
			// 		}
			// 	},
			// 	fail: (error) => {
			// 		uni.showToast({
			// 			title: error,
			// 			duration: 2000
			// 		});
			// 	},
			// 	complete: () => {
			// 		uni.hideLoading();
			// 	}
			// });
		},
	},
	onShow() {
		if(!uni.getStorageSync('openid_key')){
			loginUtils.login(baseUrl+'/member/memberLogin',() => {})
		}
	}
}
</script>

<style lang="scss" scoped>
.main{
	background: #fff;
	height: 100vh;
	display: flex;
	flex-direction: column;
	font-size: 30rpx;
	.avatarUrl{
		margin:200rpx 100rpx 50rpx 100rpx;
		.avatar{
			width:240rpx;height:240rpx;border-radius:120rpx;padding:0;
			.url{
				width:240rpx;height:240rpx;border-radius:120rpx;
			}
		}
	}
	.nick{
		display: flex;
		margin:10rpx 150rpx;
		.text{
			height: 60rpx;
			line-height: 60rpx;
		}
		.nickInput{
			height: 60rpx;
			line-height: 60rpx;
			padding-left:10rpx;
			border-bottom:#ccc solid 1px;
		}
	}
	.authority{
		margin-top:100rpx;
		view{
			height: 60rpx;
			line-height: 60rpx;
			margin:0 50rpx;
		}
		.sq{
			color:#000;
		}
		.av{
			color:#ccc;
			font-size: 28rpx;
		}
	}
	.btn{
		margin:100rpx 50rpx;
		.button{
			background:#27a280;
			color:#fff;
		}
	}
}
</style>